<template>
  <div class="container">
    <div class="box">
      <router-view></router-view>
      <header class="header">
        <ul>
          <router-link to="/">
            <li>
              <span>SAMSUNG</span>
            </li>
          </router-link>
          <router-link to="/search">
            <li>
              <span>
                <van-icon name="search" />
              </span>
            </li>
          </router-link>
          <router-link to="/cart">
            <li>
              <span>
                <van-icon name="cart-o" />
              </span>
            </li>
          </router-link>
          <router-link to="/user">
            <li>
              <span>
                <van-icon name="contact-o" />
              </span>
            </li>
          </router-link>
          <router-link to="/kind">
            <li>
              <span>
                <van-icon name="wap-nav" />
              </span>
            </li>
          </router-link>
        </ul>
      </header>
      <div class="content">
        <div>
          <ul
            style="display: flex;
        justify-content: space-evenly;
        align-items: center;background: #fff;"
          >
            <li>
              <img src="./assets/a1.jpg" alt />
            </li>
            <li>
              <img src="./assets/a2.jpg" alt />
            </li>
            <li>
              <img src="./assets/a3.jpg" alt />
            </li>
            <li>
              <img src="./assets/a4.jpg" alt />
            </li>
          </ul>
          <van-tabs v-model:active="active">
            <van-tab title="智能手机">内容 1</van-tab>
            <van-tab title="平板|穿戴">内容 2</van-tab>
            <van-tab title="电视">
              <div class="tv">
                <img style="width:100%;height:100px;" src="./assets/tu1.jpg" alt />
                <img style="width:100%;height:100px;" src="./assets/tu2.jpg" alt />
              </div>
            </van-tab>
            <van-tab title="冰箱">内容 4</van-tab>
          </van-tabs>
        </div>
        <div>
          <h2 style="text-align: center;">新品推荐</h2>
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
              <img :src="image" style="width:100%;height:220px" />
              <h4 style="text-align: center;">Galaxy Z Flip6</h4>
              <h4 style="text-align: center;">￥7999起</h4>
              <p style="text-align: center;">选择三星订阅服务</p>
              <p style="text-align: center;">享24期分期0利率 每天低至8.77元</p>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <footer class="footer">
      <ul>
        <li v-for="item in list" :key="item.id">
          <img :src="item.image" alt />
          <div class="text">
            <p>{{item.title}}</p>
            <p>{{item.price}}</p>
            <p>{{item.name}}</p>
          </div>
        </li>
      </ul>
    </footer>
  </div>
</template>
<script setup>
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
];
import { ref } from "vue";
const list = ref([
  {
    id: 1,
    image: require("./assets/b1.jpg"),
    title: "Galaxy Watch Ultra",
    price: "￥4999",
    name: "至高200元换新补贴或至高6期0利率"
  },
  {
    id: 2,
    image: require("./assets/b2.jpg"),
    title: "Galaxy Watch Ultra",
    price: "￥4999",
    name: "至高200元换新补贴或至高6期0利率"
  },
  {
    id: 3,
    image: require("./assets/b3.jpg"),
    title: "Galaxy Watch Ultra",
    price: "￥4999",
    name: "至高200元换新补贴或至高6期0利率"
  },
  {
    id: 4,
    image: require("./assets/b4.jpg"),
    title: "Galaxy Watch Ultra",
    price: "￥4999",
    name: "至高200元换新补贴或至高6期0利率"
  }
]);
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
html,
body,
#app,
.container {
  width: 100%;
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  background: #efefef;
  .box {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .header {
      background: #fff;
      height: 50px;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        a {
          color: #000;
          span {
            font-size: 20px;
          }
          &.router-link-active {
            color: red;
          }
        }
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .tv {
        margin: 10px;
        background: #fff;
        display: flex;
      }
    }
  }
  .footer {
    height: 50px;
    ul {
      li {
        text-align: center;
        float: left;
        width: 42%;
        margin: 1%;
        background: #fff;
        padding: 10px 0;
      }
      img {
        text-align: center;
        width: 100%;
        height: 100px;
      }
    }
  }
}
</style>
